<template>
  <div>
    <Panel title="充电枪管理" useBack>
        <div slot="body">
             <div class="title-box" v-if="stateCon">
                <span>概况：</span>
                <div class="type-box all" >全部：{{total}}</div>
                <div class="type-box xian1" >空闲：{{xian}}</div>
                <div class="type-box zhunbei" >准备充电中：{{zhuibei}}</div>
                <div class="type-box zhunbei" >充电中：{{chong}}</div>
                <div class="type-box yuyue" >占用未充电：{{yuyue}}</div>
                <div class="type-box wancheng1" >充电完成：{{wancheng}}</div>
                <div class="type-box lixian1" >故障：{{guzhnag}}</div>
                <div class="type-box guzhang" >离线：{{lixian}}</div>
                <div class="type-box liwang" >离网：{{liwang}}</div>
           </div>
           <div class="sear">
               <div class="line-title"></div>
               <div class="selectBox">
                    <!-- <label>站点：</label> -->
                    <el-select
                    style="width:160px"
                    v-model="site"
                    clearable
                    filterable 
                    @change="getRefresh"
                    placeholder="请选择站点"
                    >
                    <el-option  v-for="item of siteList"
                        :key="item.id"
                        :value="item.id+''"
                        :label="item.name"></el-option>
                    </el-select>
                </div>
                <div><el-button class="resh" type="danger" plain @click="getRefresh">刷新数据</el-button></div>
           </div>
           <div class="gun">
               <div class="gun-item" v-for="(item, index) in gunList" :key="index">
                   <div class="imgbox">
                       
                       <!-- <span class="left-text" v-if="item.online == 1">{{item.state == 1 ? "空闲":item.state == 2 ? "已连接": item.state == 3 ?"充电中":item.state == 4 ?"预约中":item.state == 5 ?"充电完成":"故障"}}</span> -->
                       <!-- <span v-else-if="item.online == 2" class="left-text">故障</span> -->
                       <!-- <span v-else class="left-text">离线</span> -->
                       <div v-if="item.offNetwork">
                           <div class="circle-box liwangs">
                               <div class="soc-box">
                                <!-- <div class="soc" v-if="item.soc">{{item.soc}}%</div> -->
                                <div class="state-text">离网</div>
                            </div>
                           </div>
                       </div>
                       <div v-else-if="item.online == 0 || item.online == 2">
                           <div class="circle-box lixian">
                               <div class="soc-box">
                                <!-- <div class="soc" v-if="item.soc">{{item.soc}}%</div> -->
                                <div class="state-text">离线</div>
                            </div>
                           </div>
                       </div>
                       <div v-else>
                        <div class="circle-box" :class="[ item.state==1 ? 'xian': (item.state == 2 || item.state == 3) ? 'chong':item.state == 4 ? 'zhanwei': item.state == 5 ? 'wancheng': 'zhang']">
                            <div class="soc-box">
                                <div class="soc" v-if="item.soc">{{item.soc}}%</div>
                                <div class="state-text">{{item.state==1 ? '空闲': (item.state == 2 || item.state == 3) ? '充电中':item.state == 4 ? '占位': item.state == 5 ? '充电完成': item.state == 6 ? '故障': '离线'}}</div>
                            </div>
                        </div>
                       <!-- <img v-if="item.state == 1 && !item.carConnect " src="@/assets/xian1.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 1 && item.carConnect" src="@/assets/zhanwei.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 2" src="@/assets/chong1.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 3" src="@/assets/chong1.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 4" src="@/assets/zhanwei.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 5" src="@/assets/wancheng.png" class="charge-img" alt="">
                       <img v-else-if="item.state == 6" src="@/assets/zhang.png" class="charge-img" alt=""> -->
                       
                       </div>
                       <span class="gun-name">{{item.gunName}}</span>
                       <!-- <div class="ab-soc">90%</div> -->
                       <!-- <span class="ab-soc" v-if="item.soc && item.online ==1">{{item.soc ? item.soc+'%': '' }}</span>
                       <span v-if="item.online == 0" class="ab-text">离线</span>
                       <span v-else-if="item.online == 2" class="ab-text">故障</span>
                       <span v-else-if="item.state == 1  && item.carConnect" class="ab-text">占用未充电</span> -->
                       <!-- <span v-else class="ab-text">{{item.state == 1? '空闲': item.state == 2? '准备充电中': item.state == 3? '充电中': item.state == 4? '占用未充电': item.state == 5? '充电完成': item.state == 6? '故障': '离线'}}</span> -->
                   </div>
                   <div class="detail">
                       <span>{{item.sn}} </span>
                       <div class="line-div" v-if="item.phone">
                           <span>手机号：<a style="color: #48c1b7 !important; text-decoration: underline;" :href="'tel:'+ item.phone ">{{item.phone}}</a></span>
                        </div>
                       <div class="line-div" v-if="item.plate">
                           <span>车牌号：<span class="plate">{{item.plate}}</span></span>
                       </div>
                       
                       <div class="line-div" v-if="item.error">
                           <span>故障消息：{{item.error}}</span>
                       </div>
                       <div v-if="item.seatTime">
                           <span>占位时间(分钟)：{{item.seatTime}}</span>
                       </div>
                       <div class="btn-box">
                           <div class="btn-item" v-if="item.state ==3 && item.online ==1" v-has="{action: 'order:control:stop', effect: 'hide'}">
                             <div class="tinfzhi" @click="stopCharge(item.sn)">停充</div>
                           </div>
                           <div class="btn-item" v-if="item.carConnect">
                               
                            <el-popover
                                placement="right"
                                width="90%"
                                trigger="click">
                                <div class="chargeOrder">
                                    <div class="line-div" v-if="item.phone" @click="copyText(item.phone)">{{item.nick}} <span class="lines"></span> <a style="color: blue; text-decoration: underline;" :href="'tel:'+ item.phone ">{{item.phone}}</a></div>
                                    <div v-else>运营商：{{item.nick}}</div>
                                    <div @click="copyText(item.plate)">车牌：{{item.plate}} <i class="el-icon-document-copy copy"></i></div>
                                    <div>预估剩余时间(小时)：<span>{{item.surplusTime}}</span></div>
                                    <div @click="copyText(item.oid)">订单编号：{{item.oid}}<i class="el-icon-document-copy copy"></i></div>
                                    <div v-if="item.seatPrice">占位费用：{{item.seatPrice}}</div>
                                    <div v-if="item.seatPrice">占位时间：{{item.beginSeatTime}}至{{item.endSeatTime}}</div>
                                </div>
                                <div slot="reference" class="chargeBtn">充电详情</div>
                            </el-popover>
                           </div>

                            <div class="btn-item"  v-if="item.nick =='快电'">
                                <el-popover
                               
                                placement="right"
                                width="90%"
                                trigger="click">
                                <div class="chargeOrder">
                                    <div class="line-div"><a style="color: blue; text-decoration: underline;" :href="'tel:'+ phone ">{{phone}}</a></div>
                                </div>
                                <div slot="reference" class="chargeBtn"  @click="getPhone(item.oid)">查询手机号</div>
                            </el-popover>
                            </div>
                       </div>
                   </div>
               </div>
           </div>
        </div>
       
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import request from "@/tools/request";
import { numToStringTime } from '@/tools/array.js'
export default {
    name: 'siteGunListApp_',
  components: {
    Panel,
  },
  data() {
    return {
    pwd: '',
     total: 0,
     xian:0,
     zhuibei:0,
     chong: 0,
     yuyue:0,
     wancheng: 0,
     guzhnag:0,
     lixian:0,
     gunList: [],
     siteList: [],
     site: '',
     phone: '',
     liwang: 0,
     stateCon: false,

    };
  },
  computed: {
      ismOrpc(){
          return this.$store.getter.ismOrpc
      }

  },
  methods: {
     async viewPwd(id ){
      let res = await request({
        url: `/iot/pile/gun/pwd/${id}`,
        method: "POST",
        data:  {}
      });
      if(res.code !==0) return
      this.pwd = res.pwd
    },
    async reshPwd(sn){
      let res = await request({
        url: `/iot/pile/gun/pwd/refresh/${sn}`,
        method: "POST",
        data:  {}
        });
        if(res.code !==0) return
       this.$message.success('刷新成功')
    },
    hide(){
        this.pwd =''
    },



    copyText(content) {
     var copyDom = document.createElement('div');
    copyDom.innerText=content;
    copyDom.style.position='absolute';
    copyDom.style.top='0px';
    copyDom.style.right='-9999px';
    document.body.appendChild(copyDom);
    //创建选中范围
    var range = document.createRange();
    range.selectNode(copyDom);
    //移除剪切板中内容
    window.getSelection().removeAllRanges();
    //添加新的内容到剪切板
    window.getSelection().addRange(range);
    //复制
    var successful = document.execCommand('copy');
    copyDom.parentNode.removeChild(copyDom);
    try{
        this.$message.success('复制成功')
    } catch(err){
        this.$message.err('复制失败')
    }
    },
    async getPhone(oid){
        this.phone = ''
        const res = await request({
            url: "/order/third/phone/"+oid,
            method: "GET",
            
        });
        if(res.phone.success){
            this.phone = res.phone.phone
        }else{
            this.phone = res.phone.msg
        }
    },
    getRefresh(){
        if(this.stateCon){
            this.fetchData()
        }
        
        this.getGun()
    },
    //获取站点
    async iotSite(){
      let { list } = await request({
      url: "/iot/site/select",
      method: "POST",
      data: {}
      });
      
      
      list.map(item => {
          if(!item.soc) {
              item.soc = 0
          }
          if(item.state ==1 && item.carConnect){
              item.state = 4
          }
      })
      
      this.siteList.push(...list) 
    },
     compare(property,desc) {
                return function (a, b) {
                    var value1 = a[property];
                    var value2 = b[property];
                    if(desc==true){
                        // 升序排列
                        return value1 - value2;
                    }else{
                        // 降序排列
                        return value2 - value1;
                    }
                }
     },
    async fetchData(){
      let site = this.site
      let { list } = await request({
        url: "/iot/count/states",
        method: "POST",
        data: {siteId: site}
      });
       var total = 0
       list.map(item => {
           
           if(item.state == 1){
               this.xian = item.total
           }else if(item.state == 2){
              this.zhuibei = item.total 
           }else if(item.state == 3){
              this.chong = item.total 
           }else if(item.state == 4){
              this.yuyue = item.total 
           }else if(item.state == 5){
              this.wancheng = item.total 
           }else if(item.state == 6){
              this.guzhnag = item.total 
           }else if(item.state == 7){
              this.liwang = item.total 
           }else if(item.state == 0){
              this.lixian = item.total 
           }
           total+= item.total
          
       })
       this.total = total
    },

    async getGun() {
       let site = this.site
       let { code, list}= await request({
       url: '/iot/real/gun/list',
       method: "POST",
       data:{site: site}
     })
   
    //  console.log('充电枪', list)
     if(code ==0){
         list.map(item => {
             if(!item.soc) {
              item.soc = 0
          }
          if(item.state ==1 && item.carConnect){
              item.state = 4
          }
            item.surplusTime = numToStringTime(item.surplusTime)
            item.totalTime = numToStringTime(item.totalTime)
            item.dayTime = numToStringTime(item.dayTime)
            if(item.seatTime){
                item.seatTime = numToStringTime(item.seatTime)
            }
            //  item.dayTime = item.dayTime ? (item.dayTime/3600).toFixed(2) :0
            //  item.totalTime = item.totalTime ? (item.totalTime/3600).toFixed(2) :0
            //  item.surplusTime = item.surplusTime ? (item.surplusTime/3600).toFixed(2) :0
            //  item.seatTime = item.seatTime ? (item.seatTime/60).toFixed(2) :0
             if(item.online == 0){
                 item.state = 6
             }
             if(item.plate){
                item.plate = item.plate? item.plate.slice(0, 2) + '·' + item.plate.slice(2): ''
            }
             return item
         })
       list.sort(this.compare('soc',false))
       this.gunList = list
     }
    },
    stopCharge(gunSn){
        // console.log(gunSn)
        this.$confirm('确认停止充电吗', '操作确认', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then( async () => {
            let res = await request({
            url: '/iot/pile/gun/control/stop/'+gunSn,
            method: 'GET',
            })
            if(res.code !==0) return
            this.$message.success('操作成功')
            if(this.tableData.length===1 && this.pager.current>1)
            this.$set(this.pager,'current', this.pager.current-1)
            this.getGun()
        })
    },

  },
  created() {
    this.iotSite()
    if(this.$route.query.id){
        this.site = this.$route.query.id+''
        let rout = this.$store.getters.permissions
        if(rout.indexOf('iot:count:statistics') >=0){
            this.stateCon = true
            this.fetchData()
        }
        this.getGun()
    }
    
  },
  mounted() {
  }
};
</script>

<style lang='scss' >
.plate{
    color: #266fdd;
    // border-radius: 8px;
    font-weight: bold;
    font-size: 16px;
}
.title-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .type-box {
        padding: 10px 5px;
        border-radius: 7px;
        color: #fff;
        margin-right: 5px;
        font-size: 14px;
    }
    .xian1 {
        background: #86cf18;
    }
    .zhunbei{
        background: #18baff;
    }
    .lixian1 {
        background: #ab6060;
    }
    .wancheng1 {
        background: #e2b942
    }
    .guzhang {
        background: #858585;
    }
    .liwang {
        background: #9a60b4;
    }
    .chong{
        background: #ea7ccc;
    }
    .yuyue {
        background: #ee6666;
    }
    .all{
        background: #fff;
        color: #19c5e0;
        border: 1px solid #19c5e0;
    }
}
.gun {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    color: #6f6f6f;
}
.btn-item {
    margin-left: 2px;
    margin-bottom: 8px;
}
.btn-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 7px;
}
.gun-item {
    display: flex;
    width: 427px;
    border-bottom: 1px solid #f1f1f1;
    margin-right: 8px;
    flex: 1;
    // border-radius: 5px;
    padding: 4px 10px 4px 0;
    // height: 132px;
    margin-bottom: 20px;
    justify-content: space-between;
    .imgbox {
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-right: 10px;
        width: 55px;
        .left-text {
            margin-left: 16px;
        }
        .charge-img {
            height: 87px;
        }
        .ab-soc {
            position: absolute;
            color: #a14e1e;
            font-weight: bold;
            top: 30px;
            left: 19px;
        }
        .ab-text {
            position: absolute;
            color: #687b81;
            bottom: -10px;
            font-size: 12px;
            left: 36%;
            transform: translateX(-50%);
        }
    }
    .gun-name{
        font-size: 12px;
        text-align: center;
    }
    .detail {
        display: flex;
        width: 80%;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 8px;
        color: #092638;
        font-size: 14px;
        .tinfzhi {
            padding: 0 4px;
            background: #5dd6f1;
            text-align: center;
            color: #fff;
            width: 40px;
            border-radius: 4px;
            // margin-right: 10px;
            cursor: pointer;
            border: 1px solid #5dd6f1;
        }
    }

}
.copy {
    color: #979797;
}
.soc{ 
    font-weight: bold;
    color: #ce4300;
}
.soc-box {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    // transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.state-text {
    font-size: 12px;
}
.border1 {
    border: 1px solid #a4de87;
}
.border2, .border3 {
    border: 1px solid #2ba6e0;
}
.border4 {
    border: 1px solid #f55ab9;
}
.border5, .border6 {
    border: 1px solid #a09c9c;
}
.circle-box {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xian {
    border: 1px solid #86cf18;
}
.zhanwei {
    border: 1px solid #ee6666;
}
.chong {
    border: 1px solid #18baff;
}
.zhang {
    border: 1px solid #ab6060;
}
.lixian {
    border: 1px solid #858585;
}
.wancheng {
    border: 1px solid #e2b942;
}
.liwangs {
    border: 1px solid #9a60b4;
}

.lines {
    height: 15px;
    width: 2px;
    background: #ccdde6;
    display: block;
    margin: auto 4px;
    border-radius: 10px;
}
.line-title {
    border-radius: 2px;
    width: 8px;
    height: 25px;
    background-image: linear-gradient(90deg, #ef8b09, #fffdf5);
    margin: auto 4px;
}
.sear {
    display: flex;
    align-items: center;
    padding-top: 20px;
    flex-wrap: wrap;
}
.resh {
    height: 34px;
    // margin-left: 34px;
    display: flex;
    align-items: center;
}
.line-div{
    display: flex;
    // justify-content: space-around;
}
.chargeBtn{
    border: 1px solid #777c7d;
    background: #fff;
    border-radius: 4px;
    color: #777c7d;
    padding: 0px 3px;
    // margin-top: 5px;
    
}
.view-btn{
    border: 1px solid #f56c6c;
    background: #fff;
    border-radius: 4px;
    color: #e73010;
    padding: 3px;

}
.chargeOrder {
    background: #e6f7ff;
    border-radius: 4px;
    padding: 18px 7px;
    color: #040404;
}
.numbers {
    font-weight: 700;
    color: #423932;
}
.selectBox {
  margin: 4px 0;
  margin-right: 2px;
  :global {
    label {
      font-size: 14px;
      color: #666666;
    }
    .el-input__inner {
      height: 32px;
    }
    .el-input__suffix {
      line-height: 32px;
    }
    .el-date-editor--datetime{
      width: 200px;
    }
  }
}
.a{

}
</style>